import React from "react";

class EventDemo extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'zhangsan',
      list: [
        {
          id: 'id-1',
          title: '标题1'
        },
        {
          id: 'id-2',
          title: '标题2'
        },
        {
          id: 'id-3',
          title: '标题3'
        }
      ]
    }
    this.handleClick = this.handleClick.bind(this)
  }

  render() {
    // return (
    //   // this ---使用bind改变this指向
    //   <p onClick={this.handleClick}>
    //     { this.state.name }
    //   </p>
    // )

    // return (
    //   // this使用箭头函数的静态方法
    //   <p onClick={this.handleClick2}>
    //     {this.state.name}
    //   </p>
    // )

    // event
    // return (
    //   <a href="" onClick={this.handleClick3}>
    //     Click me
    //   </a>
    // )
    
    // 传递参数
    return (
      <ul>
        { this.state.list.map(item => {
          return (
            <li key={item.id} onClick={this.handleclick4.bind(this, item.title)}>{item.title}</li>
          )
        })}
      </ul>
    ) 
  }
  handleClick() {
    console.log(this);
    this.setState({
      name: 'lisi'
    })
  }

  handleClick2 = (event) => {
    this.setState({
      name: 'lisi'
    })
  }

  handleClick3 = (event) => {
    // 1.event是SyntheticBaseEvent，模拟出来DOM事件所有能力
    // 2.event.nativeEvent是原生事件对象
    // 3.所有事件，都被挂载到document上
    // 4.和DOM事件不一样和Vue事件也不一样
    event.preventDefault()
    event.stopPropagation()

    console.log(event);
  }

  handleclick4(title, event) {
    console.log(event);
    console.log(title);
  }

}

export default EventDemo